<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/data.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="https://img.hcharts.cn/highcharts/themes/dark-unica.js"></script>
    <style>
        body {
            height: 100%;
            background-color: #39393b;
        }
    </style>
</head>
<body>


<!--
*************************************************************************
   Generated by HCODE at 2017-06-30 14:29:40
   From: https://code.hcharts.cn/demos/hhhhxc?hc-theme=dark-unica
*************************************************************************
 -->
<div style="margin-top: 15% ">
    <div id="container" style="min-width:100%;height:100%"></div>
</div>
<div class="message"></div>

<script>
    $(document).ready(function () {
        setInterval(function () {
            //定时器要执行的代码
            func();
            $('.highcharts-credits').hide();
        }, 30000);
        function func() {
            // 获取 CSV 数据并初始化图表
            $.getJSON('', function (csv) {
                {#                            console.log(csv);#}
                $('#container').highcharts({

                    data: {
                        csv: csv
                    },
                    title: {
                        text: '网站日常访问量'
                    },
                    subtitle: {
                        text: '数据来源: Google Analytics'
                    },
                    xAxis: {
                        tickInterval: 7 * 24 * 3600 * 1000, // 坐标轴刻度间隔为一星期
                        tickWidth: 0,
                        gridLineWidth: 1,
                        labels: {
                            align: 'left',
                            x: 3,
                            y: -3
                        },
                        // 时间格式化字符
                        // 默认会根据当前的刻度间隔取对应的值，即当刻度间隔为一周时，取 week 值
                        dateTimeLabelFormats: {
                            week: '%Y-%m-%d'
                        }
                    },
                    yAxis: [{ // 第一个 Y 轴，放置在左边（默认在坐标）
                        title: {
                            text: null
                        },
                        labels: {
                            align: 'left',
                            x: 3,
                            y: 16,
                            format: '{value:.,0f}'
                        },
                        showFirstLabel: false
                    }, {    // 第二个坐标轴，放置在右边
                        linkedTo: 0,
                        gridLineWidth: 0,
                        opposite: true,  // 通过此参数设置坐标轴显示在对立面
                        title: {
                            text: null
                        },
                        labels: {
                            align: 'right',
                            x: -3,
                            y: 16,
                            format: '{value:.,0f}'
                        },
                        showFirstLabel: false
                    }],
                    legend: {
                        align: 'left',
                        verticalAlign: 'top',
                        y: 20,
                        floating: true,
                        borderWidth: 0
                    },
                    tooltip: {
                        shared: true,
                        crosshairs: true,
                        // 时间格式化字符
                        // 默认会根据当前的数据点间隔取对应的值
                        // 当前图表中数据点间隔为 1天，所以配置 day 值即可
                        dateTimeLabelFormats: {
                            day: '%Y-%m-%d'
                        }
                    },
                    plotOptions: {
                        series: {
                            cursor: 'pointer',
                            point: {
                                events: {
                                    // 数据点点击事件
                                    // 其中 e 变量为事件对象，this 为当前数据点对象
                                    click: function (e) {
                                        $('.message').html(Highcharts.dateFormat('%Y-%m-%d', this.x) + ':<br/>  访问量：' + this.y);
                                    }
                                }
                            },
                            marker: {
                                lineWidth: 1
                            }
                        }
                    }
                });
                $('.highcharts-credits').hide();
            });
        }

        func();


    });
</script>
</body>
</html>
{#<text x="903" class="highcharts-credits" text-anchor="end" style="cursor:pointer;color:#666;font-size:9px;fill:#666;" y="395">Highcharts.com.cn</text>#}